<template>
  <div class="continer">
    <div class="vistor_ections">
      <div class="vistor_vitor">
        <div class="My_visito_rs">
          {{
            seled_t == 4 ? "点赞我的" : seled_t == 5 ? "我的点赞" : "我的访客"
          }}
        </div>
        <div class="empty_delete"></div>
      </div>
    </div>
    <div class="vistor_content">
      <!-- 11111 -->
      <div class="preview_preview" v-if="seled_t == 4">
        <div class="Preview_main" v-for="(item, index) in thumbUp" :key="index">
          <div><img class="img" :src="item.PreviewHeader" /></div>
          <div>
            <h4>{{ item.Name }}ella</h4>
            <div class="preview_content">
              {{ item.QianMing }}happy everyday~
            </div>
            <p>{{ item.AddTime }}2021/08/19 22:25:59</p>
          </div>
          <div class="deles"><img src="../assets/vistor/deles.png" /></div>
        </div>
      </div>
      <!-- 我的点赞 api//68f163280974483f994772e2277f0c96-->
      <div class="preview_preview" v-if="seled_t == 5">
        <div class="Preview_main" v-for="(item, index) in myThumb" :key="index">
          <div><img class="img" :src="item.PreviewHeader" /></div>
          <div>
            <h4>{{ item.Name }}ella</h4>
            <div class="preview_content">
              {{ item.QianMing }}happy everyday~
            </div>
            <p>{{ item.AddTime }}2021/08/19 22:25:59</p>
          </div>
          <el-button type="text" @click="deles(item.Id)"
            ><img src="../assets/vistor/deles.png"
          /></el-button>
          <!-- <div class="deles"  @click="deles(value)"><img src="../assets/vistor/deles.png" /></div> -->
        </div>
      </div>
      <div class="preview_preview" v-else>
        <div
          class="Preview_main"
          v-for="(item, index) in visitorMyList"
          :key="index"
        >
          <div><img class="img" :src="item.PreviewHeader" /></div>
          <div>
            <h4>{{ item.Member }}ella</h4>
            <div class="preview_content">
              {{ item.QianMing }}happy everyday~
            </div>
            <p>{{ item.DateTime }}2021/08/19 22:25:59</p>
          </div>
          <div class="deles"><img src="../assets/vistor/deles.png" /></div>
        </div>
      </div>

      <!--  -->
      <!-- <div class="Preview_main">
          <div><img src="../assets/vistor/vistorers.png" /></div>
          <div>
            <h4>ella</h4>
            <div class="preview_content">happy everyday~</div>
            <p>2021/08/19 22:25:59</p>
          </div>
          <div class="deles"><img src="../assets/vistor/deles.png" /></div>
        </div> -->

      <!-- 2222 -->
      <!-- <div class="preview_preview">
        <div class="Preview_main">
          <div><img src="../assets/vistor/vistorers.png" /></div>
          <div>
            <h4>ella</h4>
            <div class="preview_content">happy everyday~</div>
            <p>2021/08/19 22:25:59</p>
          </div>
          <div class="deles"><img src="../assets/vistor/deles.png" /></div>
        </div> 
        
         <div class="Preview_main">
          <div><img src="../assets/vistor/vistorers.png" /></div>
          <div>
            <h4>ella</h4>
            <div class="preview_content">happy everyday~</div>
            <p>2021/08/19 22:25:59</p>
          </div>
          <div class="deles"><img src="../assets/vistor/deles.png" /></div>
        </div>
      </div> -->
      <!-- 3333 -->
      <!-- <div class="preview_preview">
        <div class="Preview_main">
          <div><img src="../assets/vistor/vistorers.png" /></div>
          <div>
            <h4>ella</h4>
            <div class="preview_content">happy everyday~</div>
            <p>2021/08/19 22:25:59</p>
          </div>
          <div class="deles"><img src="../assets/vistor/deles.png" /></div>
        </div>
        
        <div class="Preview_main">
          <div><img src="../assets/vistor/vistorers.png" /></div>
          <div>
            <h4>ella</h4>
            <div class="preview_content">happy everyday~</div>
            <p>2021/08/19 22:25:59</p>
          </div>
          <div class="deles"><img src="../assets/vistor/deles.png" /></div>
        </div>
      </div> -->
      <!-- 444 -->
      <!-- <div class="preview_preview">
        <div class="Preview_main">
          <div><img src="../assets/vistor/vistorers.png" /></div>
          <div>
            <h4>ella</h4>
            <div class="preview_content">happy everyday~</div>
            <p>2021/08/19 22:25:59</p>
          </div>
          <div class="deles"><img src="../assets/vistor/deles.png" /></div>
        </div>
        
        <div class="Preview_main">
          <div><img src="../assets/vistor/vistorers.png" /></div>
          <div>
            <h4>ella</h4>
            <div class="preview_content">happy everyday~</div>
            <p>2021/08/19 22:25:59</p>
          </div>
          <div class="deles"><img src="../assets/vistor/deles.png" /></div>
        </div>
      </div> -->
      <!-- 分页开始 -->
      <div class="paging_starts">
        <div>
          <el-pagination
            background
            layout="prev, pager, next"
            @prev-click="change_page"
            @next-click="change_page"
          ></el-pagination>
          <div class="pageItem">{{ page }}</div>
        </div>
      </div>
      <!-- 分页结束 -->
    </div>
  </div>
</template>
<script>
import {
  getVisitorMyList,
  getMyLikeDataList,
  getLikeMyDataList,
  getDeleteToMyLike,
} from "../utils/http.js";
export default {
  name: "Visitor",
  data: () => ({
    is_selected_dyanamic: true,
    visitorMyList: "",
    myThumb: "",
    thumbUp: "",
    page: 1,
    total: 0,
  }),
  created() {
    this.getVisitor();
  },
  methods: {
    // 分页
    change_page(value) {
      // value就是最新的页码
      this.page = value;
      this.getVisitor();
    },
    getVisitor() {
      var param = {
        Page: this.page,
      };
      console.log(param);
      //我的访客
      getVisitorMyList(param).then((res) => {
        this.visitorMyList = res.Obj.List;
        console.log(this.visitorMyList, "147");
        console.log(this.visitorMyList[0].Member, "148");
        // 这个接口需要传递total
        //然后复制 total上 就好了 ，total 后端加
      });
      //我的点赞
      getMyLikeDataList(param).then((res) => {
        this.myThumb = res.Obj.List;
        console.log(res, "我的点赞");
      });
      //点赞我的
      getLikeMyDataList(param).then((res) => {
        this.thumbUp = res.Obj.List;
        console.log(res, "点赞我的");
      });
      // deles(value){
      //   var param = {
      //     Id : value,
      //   };
      //   console.log(param);
      //   getDeleteToMyLike(param).then((res) =>{
      //     console.log(res);
      // })
      // }
    },
    //我的点赞删除接口
    deles(value) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getDeleteToMyLike(value)
            .then((res) => {
              console.log(res, "res203");
              // 是这个借口吗 现在没问题了啊  你没看到吗？ 你看着啊
            })
            .catch((err) => {});
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getVisitor();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  props: {
    seled_t: {
      type: Number,
      default: 0,
    },
  },
};
//访客组件
</script>
<style>
html {
  background-color: #eff2fc;
}
</style>
<style lang="less" scoped>
.paging_starts {
  margin: 0 auto;
  position: relative;
  top: 80px;
  width: 55%;
  > div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .pageItem {
      margin: 0 5px;
      background-color: #f4f4f5;
      color: #606266;
      min-width: 30px;
      border-radius: 2px;
      text-align: center;
    }
  }
}
</style>
<style scoped>
.continer {
  width: 73%;
}
.vistor_content {
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  padding-top: 25px;
}
.vistor_ections {
  background-color: #ffffff;
}
.vistor_vitor {
  /* display: flex; */
  /* align-items: center; */
  width: 93%;
  /* margin-bottom: 10px; */
  margin: 0 auto 10px auto;
  /* border: 1px solid red; */
  justify-content: space-between;
}
.My_visito_rs {
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #4064e3;
  border-bottom: 2px solid #4064e3;
}
.empty_delete {
  padding-bottom: 10px;
  padding-top: 10px;
  color: #999999;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  border-bottom: 2px solid #ffffff;
}
.preview_preview {
  /* width: 1920px; */
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 10px;
}
.Preview_main {
  display: flex;
  justify-content: space-around;
  background: #f8f9fe;
  border-radius: 10px;
  width: 35%;
  padding: 15px 15px;
  margin-bottom: 20px;
}
.Preview_main div:nth-of-type(1) {
  margin-right: 13px;
}
.Preview_main h4 {
  margin-bottom: 15px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
}
.Preview_main p {
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #a5aec7;
}
.Preview_main .img {
  width: 80px;
  height: 80px;
  border-radius: 20%;
}
.preview_content {
  margin-bottom: 45px;
  background: #fbfcff;
  border-radius: 10px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.deles img {
  transform: scale(0.8);
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  /* position: relative; */
  /* top: 80px; */
  width: 55%;
}

.pageItem {
  /* .my /deep/ .el-input__inner{
		border-radius: 30px;/* 这个起作用 */
  /* } */
}
/* .paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
} */
/* .paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
} */
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 20px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 80px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.paging_starts {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 50px;
  width: 55%;
}
.paging_starts ul {
  display: flex;
  width: 85%;
  align-items: center;
  justify-content: space-around;
}
.paging_starts ul li {
  list-style: none;
  width: 22px;
  height: 22px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fefeff;
  background: #4064e3;
  border-radius: 4px;
}
.paging_starts ul li:not(:nth-child(1)) {
  background-color: #ffffff;
  color: #4064e3;
}
.next_page {
  height: 22px;
  padding: 0 1px;
  text-align: center;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4064e3;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
</style> 
